<template>
	<view class="container">
		<view class="info-item">
			<text class="label">头像</text>
			<view class="right" @click="updateAvatar">
				<image class="avatar" :src="$img_path('/common/logo.png')" mode="aspectFill"></image>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">姓名</text>
			<view class="right" @click="toUrl('/pagesRegion/nurseReview/editName')">
				<text>123</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">性别</text>
			<view class="right" @click="toUrl('sex')">
				<text>男</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">参加工作时间</text>
			<view class="right" @click="toUrl('job')">
				<text>2020.09（4年经验）</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">出生日期</text>
			<view class="right" @click="toUrl('time')">
				<text>{{info.birthday || '无'}}</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">生肖</text>
			<view class="right" @click="toUrl('SX')">
				<text>虎</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="info-item">
			<text class="label">星座</text>
			<view class="right" @click="toUrl('XZ')">
				<text>水瓶座</text>
				<image class="r_icon" :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="display-flex center margin-top-60" style="padding: 0 22rpx; box-sizing: border-box;">
			<view class="button" style="width: 100%;height: 96rpx;line-height: 96rpx;font-size: 32rpx;text-align: center;">
				保存
			</view>
		</view>
		<!-- <popupPicker ref="popup_time" type="bottom" mode="date" @change="timeChange"></popupPicker>
		<popupPicker ref="popup_sex" type="bottom" mode="sex" :range="sexList" @change="sexChange"></popupPicker> -->
		
		<uni-popup ref="popup_sex" background-color="#fff" type="bottom" customClass="bgF">
			<view class="p-top">
				<view class="left" @click="close">取消</view>
				<view class="title">选择{{PTYPE=='sex' ? '性别' : PTYPE=='SX' ? '生肖' : '星座'}}</view>
				<view class="right" @click="confirm">确定</view>
			</view>
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<picker-view class="picker-view" indicator-style="height: 50px;" :immediate-change="true" mask-style="background:rgba(0,0,0,0)" :value="pickerValue" @change="pickerChange">
					<view class="center-bg"></view>
					<picker-view-column>
						<view class="item" v-for="(item,i) in  PTYPE=='sex' ? sexList : PTYPE=='SX' ? SXList : XZList" :key="i" :style="{color:i==pickerValue[0] ? '#333333' : '#999999',fontSize:i==pickerValue[0] ? '36rpx' : '32rpx'}">
							{{item.text}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		
		
		<dateYearMouth ref="jobTime" title="参加工作时间" :dateValue="jobDate" @change="selectDate"></dateYearMouth>
		<dateYearMouth ref="csTime" title="出生时间" dateType="days" :dateValue="csDate" @change="selectDate"></dateYearMouth>
	</view>
</template>

<script>
	import popupBox from '@/components/popup/popup.vue'
	import dateYearMouth from '@/components/popup-picker/date-year-mouth.vue'
	// import popupPicker from '@/components/popup-picker/popup-picker.vue';
	export default {
		components:{
			// popupPicker,
			popupBox,
			dateYearMouth
		},
		data() {
			return {
				val:'',
				sexList:[
					{
						value:1,
						text:'男'
					},
					{
						value:2,
						text:'女'
					}
				],
				
				SXList:[
					{
						value:1,
						text:'鼠'
					},{
						value:2,
						text:'牛'
					},{
						value:3,
						text:'虎'
					},{
						value:4,
						text:'兔'
					},{
						value:5,
						text:'龙'
					},{
						value:6,
						text:'蛇'
					},{
						value:7,
						text:'马'
					},{
						value:8,
						text:'羊'
					},{
						value:9,
						text:'猴'
					},{
						value:10,
						text:'鸡'
					},{
						value:11,
						text:'狗'
					},{
						value:12,
						text:'猪'
					},
				],
				
				XZList:[
					{
						value:1,
						text:'水瓶座'
					},{
						value:2,
						text:'双鱼座'
					},{
						value:3,
						text:'白羊座'
					},{
						value:4,
						text:'金牛座'
					},{
						value:5,
						text:'双子座'
					},{
						value:6,
						text:'巨蟹座'
					},{
						value:7,
						text:'狮子座'
					},{
						value:8,
						text:'处女座'
					},{
						value:9,
						text:'天秤座'
					},{
						value:10,
						text:'天蝎座'
					},{
						value:11,
						text:'射手座'
					},{
						value:12,
						text:'摩羯座'
					},
				],
				PTYPE:'sex',
				
				pickerValue:[0],
				info:{},
				jobDate:'',
				csDate:''
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getInfo()
		},
		methods:{
			updateAvatar(){
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					success:(res)=>{
						
					},
					fail:()=>{}
				})
			},
			editInfo(obj){
			},
			
			getInfo(){
			},
			
			pickerChange(val){
				console.log(val,this.pickerValue)
				this.pickerValue = val.detail.value
			},
			confirm(){
				
			},
			close(){
				
				this.$refs.popup_sex.close()
			},
			
			timeChange(val){
				uni.showLoading()
				this.info.birthday = val
				this.editInfo({birthday:val})
				this.$refs.popup_sex.close()
			},
			
			toUrl(data){
				switch (data){
					case 'job':
						this.$refs.jobTime.open()
						break;
					case 'time':
						this.$refs.csTime.open()
						break;
					case 'sex':
						this.PTYPE = data
						this.$refs.popup_sex.pickerValue = [this.info.gender>0 ? this.info.gender-1 : 0]
						this.$refs.popup_sex.open()
						break;
					case 'SX':
						this.PTYPE = data
						// this.$refs.popup_sex.pickerValue = [this.info.gender>0 ? this.info.gender-1 : 0]
						this.$refs.popup_sex.open()
						break;
					case 'XZ':
						this.PTYPE = data
						// this.$refs.popup_sex.pickerValue = [this.info.gender>0 ? this.info.gender-1 : 0]
						this.$refs.popup_sex.open()
						break;
					default:
						uni.navigateTo({
							url:data
						})
						break;
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	/deep/ .bgF{
		border-radius: 40rpx 40rpx 0 0 !important;
	}
</style>
<style lang="scss" scoped>
.container{
	// padding: 0rpx 22rpx;
	box-sizing: border-box;
	background-color: #FFFFFF;
	margin-top: 20rpx;
	box-sizing: border-box;
	.info-item{
		width: 100%;
		padding: 32rpx 22rpx 32rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&:not(:first-child){
			border-top: 1rpx solid rgba(0,0,0,0.1);
		}
		.label{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			width: 200rpx;
		}
		.right{
			display: flex;
			align-items: center;
			max-width: calc(100% - 220rpx);
			.avatar{
				width: 122rpx;
				height: 122rpx;
				border-radius: 50%;
			}
			&>text{
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
			}
			.r_icon{
				width: 18rpx;
				height: 34rpx;
				margin-left: 24rpx;
			}
		}
	}
}


	.p-top{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 36rpx 28rpx 10rpx;
		box-sizing: border-box;
		.left{
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 42rpx;
		}
		.title{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
		}
		.right{
			font-weight: bold;
			font-size: 30rpx;
			color: #E72A2A;
			line-height: 42rpx;
		}
	}
	
	.popup-content{
		padding: 0 22rpx;
		box-sizing: border-box;
	}
	
	.picker-view {
		width: 100%;
		height: 510rpx;
		margin-top: 20rpx;
		position: relative;
		.center-bg{
			width: 100%;
			height: 102rpx;
			background-color: #F4F4F4;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			z-index: 0;
			border-radius: 16rpx;
		}
		
		/deep/ .item {
			line-height: 102rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			font-style: normal;
			text-transform: none;
		}
	}
	
</style>
